<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" href="/assets/font/fontawesome-free-6.5.1-web/css/all.css"/>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
        rel="stylesheet"/>
  <link rel="stylesheet" href="/assets/css/blockchain.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <title>Salary</title>
</head>
<body>
<header class="bg-white fixed-top">
  <div class="container">
    <div class="row justify-content-end mt-2 mb-2">
      <div class="col-1">
        <a class="nav-link btn-dk fs-6" href="#">Đăng kí</a>
      </div>
      <div class="col-1">
        <a class="nav-link btn-dn fs-6" href="#">Đăng nhập</a>
      </div>
    </div>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid header-nav">
        <a class="mt-2" id="logo">
          Bonus <p>Zone</p>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto ">
            <li class="nav-item">
              <a class="nav-link" href="#">Tính năng</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Dịch vụ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nhiệm vụ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Thành viên</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Liên hệ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Giới thiệu</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>
<main class="banner">
  <img src="/assets/img/javascript_1.png" class="d-block w-100" alt="...">
</main>
<div class="container mb-2">
  <h2 class="title mb-4">
    Javascript (JS) là gì?
  </h2>
  <h4 class="fw-bold">1. JavaScript là gì?</h4>
  <p class="title1">JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web
    tương tác. Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương
    tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web</p>
  <img src="/assets/img/javascript_2.png" class="w-100 mb-5 rounded" height="700">
</div>
<div class="container mb-2">
  <h4 class="fw-bold">2. JavaScript dùng để làm gì?</h4>
  <p class="title1">Trước đây, các trang web có dạng tĩnh, tương tự như các trang trong một cuốn
    sách. Một trang tĩnh chủ yếu hiển thị thông tin theo một bố cục cố định và không làm được mọi
    thứ mà chúng ta mong đợi như ở một trang web hiện đại. JavaScript dần được biết đến như một công
    nghệ phía trình duyệt để làm cho các ứng dụng web linh hoạt hơn. Sử dụng JavaScript, các trình
    duyệt có thể phản hồi tương tác của người dùng và thay đổi bố cục của nội dung trên trang
    web.</p>
  <p class="title1">Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiết
    lập các thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ này bên ngoài
    trình duyệt web. Ngày nay, bạn có thể sử dụng JavaScript để thực hiện hoạt động phát triển cả ở
    phía máy khách và máy chủ. Dưới đây là một số trường hợp sử dụng phổ biến</p>
</div>
<div class="container mb-2">
  <h4 class="fw-bold">3. JavaScript hoạt động như thế nào?</h4>
  <p class="title1">Tất cả các ngôn ngữ lập trình đều hoạt động bằng cách dịch cú pháp giống tiếng
    Anh thành mã máy, hệ điều hành sau đó sẽ chạy mã này. JavaScript được phân loại khái quát là một
    ngôn ngữ viết tập lệnh hoặc một ngôn ngữ diễn giải. Mã JavaScript được diễn giải, tức là được
    công cụ JavaScript dịch trực tiếp sang mã ngôn ngữ máy cơ bản. </p>
  <p class="title1">Với các ngôn ngữ lập trình khác, trình biên dịch sẽ biên dịch toàn bộ mã
    thành mã máy trong một bước riêng. Như vậy, tất cả các ngôn ngữ viết tập lệnh đều là ngôn ngữ
    lập trình, nhưng không phải tất cả các ngôn ngữ lập trình đều là ngôn ngữ viết tập lệnh.</p>
  <p class="title1 ms-5 fw-bold">-Công cụ JavaScript</p>
  <p class="title1 ms-5">Công cụ JavaScript là một chương trình máy tính chạy mã JavaScript. Các
    công cụ
    JavaScript đầu tiên chỉ là bộ diễn giải, nhưng tất cả các công cụ hiện đại đều sử dụng biên dịch
    tại chỗ hoặc thời gian chạy để cải thiện hiệu suất.</p>
  <p class="title1 ms-5 fw-bold">-JavaScript phía máy khách</p>
  <p class="title1 ms-5">JavaScript phía máy khách đề cập đến cách thức JavaScript hoạt động trong
    trình duyệt của bạn. Trong trường hợp này, công cụ JavaScript nằm trong mã trình duyệt. Tất cả
    các trình duyệt web phổ biến đều có các công cụ JavaScript tích hợp riêng.</p>
  <p class="title1 ms-5">Các nhà phát triển ứng dụng web viết mã JavaScript với các hàm khác nhau
    được liên kết với nhiều loại sự kiện, chẳng hạn như nhấp chuột hoặc khi di chuột đến. Các hàm
    này thực hiện các thay đổi đối với HTML và CSS.</p>
  <p class="title1 ms-5">Sau đây là tổng quan về cách thức hoạt động của JavaScript phía máy
    khách:</p>
  <p class="title1 ms-5">1.   Trình duyệt tải một trang web khi bạn truy cập trang đó.</p>
  <p class="title1 ms-5">2.   Trong khi tải, trình duyệt chuyển đổi trang và tất cả các phần tử của
    trang, chẳng hạn như các nút, nhãn và hộp thả xuống, thành một cấu trúc dữ liệu được gọi là Mô
    hình đối tượng tài liệu (DOM).
  </p>
  <p class="title1 ms-5">3.   Công cụ JavaScript của trình duyệt chuyển đổi mã JavaScript thành mã
    bytecode. Mã này đóng vai trò là trung gian giữa cú pháp JavaScript và máy.</p>
  <p class="title1 ms-5">4.   Các sự kiện khác nhau, chẳng hạn như nhấp vào nút, sẽ kích hoạt việc
    thực thi khối mã JavaScript được liên kết. Sau đó, công cụ này sẽ diễn giải bytecode và thực
    hiện các thay đổi đối với DOM.</p>
  <p class="title1 ms-5">5.   Trình duyệt hiển thị DOM mới.</p>
  <p class="title1 ms-5 fw-bold">-JavaScript phía máy chủ</p>
  <p class="title1 ms-5">JavaScript phía máy chủ đề cập đến việc sử dụng ngôn ngữ viết mã trong
    logic máy chủ back-end. Trong trường hợp này, công cụ JavaScript nằm trực tiếp trên máy chủ. Hàm
    JavaScript phía máy chủ có thể truy cập cơ sở dữ liệu, thực hiện các phép toán logic khác nhau
    và phản hồi nhiều loại sự kiện do hệ điều hành của máy chủ kích hoạt. Ưu điểm chính của viết tập
    lệnh phía máy chủ là bạn có khả năng tùy chỉnh linh hoạt phản hồi của trang web dựa trên yêu cầu
    và quyền truy cập của mình cũng như theo yêu cầu thông tin từ trang web.</p>
  <img src="/assets/img/javascript_3.png" class="w-100 mb-5 rounded" height="700">
</div>
<footer class="bg-black">
  <div class="container">
    <div class="row mt-5 ms-5">
      <div class="col-lg-9 col-12">
        <div class="row">
          <div class="col-lg-3 col-12">
            <div class="position-relative">
              <div class="mb-3 pb-2 d-flex justify-content-between">
                <h4 class="overflow-y-hidden text-white">Về chúng tôi</h4>
              </div>
              <div class="collapse d-lg-block" data-bs-parent="#ft-links">
                <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
                  <li class="mb-2">
                    <a href="#" class="text-decoration-none text-reset">Giới thiệu
                      chung</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Tin tức</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Báo chí</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Sự kiện</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Podcast</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-12">
            <div>
              <div class="mb-3 pb-2 d-flex justify-content-between position-relative">
                <h4 class="overflow-y-hidden text-white">Dịch vụ</h4>
                <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
                   href="#collapseAccounts" role="button" aria-expanded="false"
                   aria-controls="collapseAccounts">
                  <i class="bi bi-chevron-down"></i>
                </a>
              </div>
              <div class="collapse d-lg-block" data-bs-parent="#ft-links">
                <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Chợ ứng dụng -
                      marketplace</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Tập huấn, chuyển giao
                      công nghệ</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Tư vấn và Triển
                      khai</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Tùy biến tính năng theo
                      yêu cầu</a>
                  </li>
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Nâng cấp Odoo</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-12">
            <div class="mb-3 pb-2 d-flex justify-content-between position-relative">
              <h4 class="overflow-y-hidden text-white">Cộng đồng</h4>
              <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
                 href="#collapseResources" role="button" aria-expanded="false"
                 aria-controls="collapseResources">
                <i class="bi bi-chevron-down"></i>
              </a>
            </div>
            <div class="collapse d-lg-block" id="collapseResources" data-bs-parent="#ft-links">
              <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
                <li class="mb-2">
                  <a href="#" class="text-decoration-none text-reset">Blogs Quản trị</a>
                </li>
                <li class="mb-2">
                  <a href="#!" class="text-decoration-none text-reset">Khóa học</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="text-decoration-none text-reset">Chương trình Cộng tác
                    viên</a>
                </li>
                <li class="mb-2">
                  <a href="#!" class="text-decoration-none text-reset">Chương trình Đối tác</a>
                </li>

              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-12">
            <div class="mb-3 pb-2 d-flex justify-content-between position-relative">
              <h4 class="overflow-y-hidden text-white">Tài nguyên</h4>
              <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
                 href="#collapseLocations" role="button" aria-expanded="false"
                 aria-controls="collapseLocations">
                <i class="bi bi-chevron-down"></i>
              </a>
            </div>
            <div class="collapse d-lg-block" data-bs-parent="#ft-links">
              <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
                <li class="mb-2">
                  <a href="#" class="text-decoration-none text-reset">Github</a>
                </li>
                <li class="mb-2">
                  <a href="#!" class="text-decoration-none text-reset">Runbot</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="text-decoration-none text-reset">Tài sản thương hiệu</a>
                </li>
                <li class="mb-2">
                  <a href="#!" class="text-decoration-none text-reset">Chính sách</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-12">
        <div class="mb-3 pb-2 d-flex justify-content-between position-relative">
          <h4 class="overflow-y-hidden text-white">Trợ giúp</h4>
          <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
             href="#collapseLocations" role="button" aria-expanded="false"
             aria-controls="collapseLocations">
            <i class="bi bi-chevron-down"></i>
          </a>
        </div>
        <div class="collapse d-lg-block" data-bs-parent="#ft-links">
          <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
            <li class="mb-2">
              <a href="#" class="text-decoration-none text-reset">Diễn đàn</a>
            </li>
            <li class="mb-2">
              <a href="#!" class="text-decoration-none text-reset">Tài liệu hướng dẫn</a>
            </li>
            <li class="mb-2">
              <a href="#" class="text-decoration-none text-reset">Trợ giúp</a>
            </li>
            <li class="mb-2">
              <a href="#!" class="text-decoration-none text-reset"> Đặt lịch hẹn</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="container mt-5" style="border-top: 1px solid white;">
    <div class="row mt-5 ms-5">
      <div class="col-lg-8 col-12">
        <div class="row" id="ft-links">
          <div class="col-lg-4 col-12">
            <div class="position-relative">
              <div class="mb-3 pb-2 d-flex justify-content-between">
                <h4 class="overflow-y-hidden text-white">Liên hệ</h4>
              </div>
              <div class="collapse d-lg-block" id="collapseLanding" data-bs-parent="#ft-links">
                <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
                  <li class="mb-2">
                    <a href="#" class="text-decoration-none text-reset">Hotline: <span>+84 0337
                                                    092 423</span></a>
                  </li>
                  <li class="mb-2">
                    <a href="#!"
                       class="text-decoration-none text-reset">Email:kieukienquocvn@gmail.com</a>
                  </li>
                </ul>
              </div>
              <div class="text-md-end d-flex align-items-center">
                <div class="d-flex gap-2">
                  <a href="#" class="btn">
                    <i class="bi bi-instagram"></i>
                  </a>
                  <a href="#" class="btn">
                    <i class="bi bi-twitter-x"></i>
                  </a>
                  <a href="#" class="btn">
                    <i class="bi bi-linkedin"></i>
                  </a>
                  <a href="#" class="btn">
                    <i class="bi bi-youtube"></i>
                  </a>
                  <a href="#" class="btn">
                    <i class="bi bi-spotify"></i>
                  </a>
                  <a href="#" class="btn">
                    <i class="bi bi-threads"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-12">
            <div>
              <div class="mb-3 pb-2 d-flex justify-content-between position-relative">
                <h4 class="overflow-y-hidden text-white">Địa chỉ</h4>
                <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
                   href="#collapseAccounts" role="button" aria-expanded="false"
                   aria-controls="collapseAccounts">
                  <i class="bi bi-chevron-down"></i>
                </a>
              </div>
              <div class="collapse d-lg-block" id="collapseAccounts" data-bs-parent="#ft-links">
                <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
                  <li class="mb-2">
                    <a href="#!" class="text-decoration-none text-reset">Trường Cao đẳng FPT
                      Polytechnic</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-12">
        <div class="mb-3 pb-2 d-flex justify-content-between position-relative">
          <h4 class="overflow-y-hidden text-white">Đăng ký kinh doanh</h4>
          <a class="d-block d-lg-none stretched-link text-body" data-bs-toggle="collapse"
             href="#collapseLocations" role="button" aria-expanded="false"
             aria-controls="collapseLocations">
            <i class="bi bi-chevron-down"></i>
          </a>
        </div>
        <div class="collapse d-lg-block" id="collapseLocations" data-bs-parent="#ft-links">
          <ul class="list-unstyled mb-0 py-3 py-lg-0 text-white">
            <li class="mb-2">
              <a href="#" class="text-decoration-none text-reset">Mã số Doanh nghiệp: 0000000000</a>
            </li>
            <li class="mb-2">
              <a href="#!" class="text-decoration-none text-reset">Được cấp phép bởi Sở Kế hoạch và
                Đầu tư Hải Phòng</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="container mt-7">
    <div class="row align-items-center">
      <div class="col-md-3 d-flex ms-5">
        <a class="mb-4 mb-lg-0 d-block text-inverse" href="#"><img
            src="/assets/img/logo-da-thong-bao-bo-cong-thuong-mau-xanh.png" width="100px"
            alt=""></a>
        <a class="mb-4 mb-lg-0 d-block text-inverse ms-2" href="#"><img
            src="/assets/img/logo-dmca.png"
            width="100px" alt=""></a>
      </div>
      <div class="col-md-8 col-lg-6">
        <div class="small mb-3 mb-lg-0 text-lg-center">
          Copyright belongs to web Technology Joint Stock Company
        </div>
      </div>
      <div class="col-md-2">
      </div>
    </div>
  </div>
</footer>
<!-- AOS JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
<script src="/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>